<template>
	<view class="query-custom-head">
		<view class="mod-custom-bar">
			<view class="custom-black" @click="back">
				<text class="cuIcon-back"></text><text>返回</text>
			</view>
			<view class="custom-content">
				<text>{{name}}</text>
			</view>
		</view>
		<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'rpx'}]">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="请输入合同名称或付款编号" v-model="searchVal" confirm-type="search" @input="handleInput"></input>
			</view>
			<!-- <view class="action">
				<button class="cu-btn bg-gradual-blue shadow-blur round" @click="search">搜索</button>
			</view> -->
		</view>
		<view class="">
			<list-sporadic :type='type' ref='listSporadic'></list-sporadic>
		</view>
	</view>
</template>

<script>
// import listContract from '../listContract.vue';
import listSporadic from '../listSporadic.vue';
import { debounce } from 'lodash';

export default {
	components: {
		// listContract
		listSporadic
	},
	onLoad(option) {
		this.type = option.type;
		this.name = '我的零星付款';
	},
	data() {
		return {
			CustomBar: 76,
			type: 'query',
			searchVal: "",
			name: '',
			debouncedSearch: null
		};
	},
	mounted() {
		this.debouncedSearch = debounce(this.search, 300); // 防抖处理
	},
	methods: {
		handleInput() {
			this.debouncedSearch(); // 调用防抖后的搜索方法
		},
		search() {
			console.log(this.searchVal);
			this.$refs.listSporadic.reloadList({
				name: this.searchVal
			});
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
	}
}
</script>

<style lang="scss">
	.query-custom-head {
		padding-top: 176rpx;
	}
	.mod-custom-bar {
		display: flex;
		flex-direction: row;
		justify-content: center;
		color: #fff;
		line-height: 76rpx;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 10;
		background: linear-gradient(135deg, rgba(85, 255, 255, 1.0) 0%, rgba(64,122,224,1) 100%);
		.custom-black {
			color: #fff;
			position: absolute;
			height: 76rpx;
			left: 0;
			top: 0;
			width: 160rpx;
			z-index: 10;
		}
		.custom-content {
			flex: 1;
			color: #fff;
			text-align: center;
		}
	}
	.bar-mod {
		height: 76rpx !important;
	}
</style>
